{% extends 'universal/myself_base.html' %}
{% block title %}登录{% endblock %}
{% block page_content %}
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"><!--水平垂直居中，但这种设置方式在打开审查元素时页面元素会跟着移动，导致实时水平垂直居中。from https://blog.csdn.net/weixin_42138139/article/details/112441958方法3-->
        <div class="btn-group" role="group"><!--按钮代码(单个按钮)是复制bootstrap的https://v3.bootcss.com/css/#buttons，按钮组(外层div)复制的https://v3.bootcss.com/components/#btn-groups。一开始只用了按钮组，按钮是下一行注释的写法-->
            <!--<button type="button" class="btn btn-default"><a href="#" style="color:inherit;text-decoration:none;font-size:15px;">密码登录</a></button>按钮内容写成a标签，实现点击按钮跳转到指定页(尽管稍微调大了字体，但实际还需点击a标签才跳转)。inherit使元素呈现出它上一级的颜色(不改的话a标签默认蓝色)，text-decoration是a标签下划线-->
            <a class="btn btn-default" href="{{ url_for('user.login') }}?way=1" role="button">密码登录</a><!--跳转链接可用?加参数，不同的参数值对应不同的登录方式，即显示不同的表单，这里定义way为1时显示密码登录表单，为2时显示短信登录表单-->
            <a class="btn btn-default" href="{{ url_for('user.login') }}?way=2" role="button">短信登录</a>
        </div>
        <div class="row"><!--复制bootstrap的栅格系统，栅格的内层div设置列宽时与最外层(最上面)div的水平垂直居中冲突，所以未设列宽-->
            <div>{{ wtf.quick_form(form) }}{# 设置block使子文件通过同名block方便地修改此处内容 #}</div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script>
        $(function (){ //使用jQuery时，JavaScript代码直接写在$()内
            if($('#verification_code').length>0){ //length是匹配到的jQuery对象的个数，不大于0就是未获取到对象，说明当前加载的不是短信登录页(该对象只在短信登录页存在)，就不用执行这段针对短信登录页的jQuery代码。
                alert('未购买短信服务，验证码已手动设为123456，仍需点击发送验证码!') //因没购买短信服务，所以加个alert()提示，需要只在短信登录时提示，密码登录时不提示，所以在提示和下面针对短信登录页的jQuery代码的外层加个if判断(即上一行的if)，做到密码登录时无这个提示，且不执行下面这些针对短信登录页的jQuery代码
                $('#verification_code').after('<span class="label label-info" id="send_verification_code" style="font-size:13px;">发送验证码</span><!--复制bootstrap的标签代码-->') //添加span用于点击发送验证码。append()是向每个匹配的元素内部追加内容，after()是在每个匹配的元素之后插入内容。from jQuery手册
                $('#send_verification_code').after('<span></span>') //添加span用于显示Ajax前端验证时服务端发来的提示，不能将这句写在click()里，原因同register.html中添加span的上一行的注释
                $('#send_verification_code').click(function (){
                    let phone_number=$('#phone').val()
                    if(!(/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(phone_number))){ //正则from http://c.runoob.com/front-end/854
                        let s=$('#send_verification_code').next('span')
                        s.css({'color':'red','font-size':'13px'}) //格式from jQuery手册。css代码也可以写在block styles内，并放在<style>标签里，就像这段js代码放在block scripts内，并放在<script>标签里，都要加super()
                        s.text('') //清除上次的提示
                        s.text('手机号格式不正确')
                    }else {
                        let s=$('#send_verification_code').next('span')
                        s.css({'color':'red','font-size':'13px'})
                        s.text('') //清除上次的提示，特意放在发送Ajax请求之前，因放在这里的话触发提示时会闪烁一下，是点击"发送验证码"后的反馈，特别是多次点击时表示又发送了新的验证码，用户体验比写在发送Ajax请求之后(register.html中注册时写法，那里不需要闪烁)好
                        $.get("{{ url_for('user.send_verification_code') }}",{phone:phone_number},function (data){ //发送Ajax请求，同register.html中，但这里用的get
                            if(data.flag==200)
                                s.text(data.message)
                            else if(data.flag==400)
                                s.text(data.message)
                        })
                    }
                })
            }
            $('#recaptcha').after('<img src=\"{{ url_for("user.verification_code_image") }}\" id=\"img\" alt=\"验证码图片加载失败\" />') //三层引号嵌套from https://blog.csdn.net/feiyangbaxia/article/details/49681131和https://blog.csdn.net/zhongyangjian/article/details/46010157
            $('#img').click(function (){
                $(this).attr('src',"{{ url_for('user.verification_code_image') }}?ran="+Math.random()) //带一个随机数，否则点击时请求的路由与点击前加载的一致，服务端会返回相同的结果，即点击前加载的结果
            })
        })
    </script>
{% endblock %}